<template>
<div ref="container" class="container">
    <div >
        <!-- hot -->
        <div class="hot">
            <div class="hot-title">
                热门城市
            </div>
            <ul class="hot-list">
                <li class="hot-item" v-for="item in hotCities"
                :key="item.id"
                @click="changeCityName(item.name)"
                >
                    {{item.name}}
                </li>
            
            </ul>
        </div>
        <!-- scrt -->
        <div class="sort">
            <div class="sort-title">
                字母排序
            </div>
            <ul class="sort-list">
                <li class="sort-item" 
                v-for="(val,key) in cities"
                @click="changeSort(key)" >
                    {{key}}
                </li>   
            
            </ul>
        </div>
        <!-- list -->
        <div class="list">
            <div  v-for="(val,key) in cities"
            :ref="key">
            <div class="list-title">
                {{key}}
            </div>
            <ul class="list-message">
                <li class="list-item"
                v-for="item in val"
                :key="item.id"
                @click="changeCityName(item.name)"
                >
                    {{item.name}}
                </li>
                
            </ul>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import {mapMutations} from "Vuex"
import BScroll from 'better-scroll'
export default {
    props:["cities","hotCities"],
    data(){
        return{
            scroll:""
        }
    },
    mounted(){
        const options = {
        click: true,
        observeDOM: true
        }
        console.log(this.$refs["container"]);
        let container = this.$refs['container'];
        this.scroll = new BScroll(container,options)
    },
    methods:{
        changeSort(sortntame){
            this.scroll.scrollToElement(
                this.$refs[sortntame][0]);
            console.log(this.$refs[sortntame][0]);
        },
        changeCityName(CityName){
            // alert(CityName);
            this.changeCity(CityName);
            this.$router.push("/");
        },
        ...mapMutations(["changeCity"])
    },
    watch:{
    
    }
}
</script>
<style scoped>
.container{
    position: absolute;
    
    left: 0;
    right: 0;
    bottom: 0;
    top: .88rem;
    background: #f5f5f5;
    overflow: hidden;
}
.list-title{
    font-size: .26rem;
    color: #212121;
    padding: .2rem  .3rem;
}
.list-message{
    background: #fff;
    position: relative;
    overflow: hidden;
}

.list-item{
    position: relative;
    font-size: .28rem;
    width: 25%;
    text-align: center;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
     word-break:keep-all;      
    white-space:nowrap;
    overflow:hidden;          
    text-overflow:ellipsis;
}
.list-message:before{
    content: " ";
    position: absolute;
    left: 25%;
    width: 25%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
}
.list-message:after{
    content: " ";
    position: absolute;
    left: 75%;
    width: 0;
    height: 100%;
    border-left: .02rem solid #ddd;
}

.sort-title{
    font-size: .26rem;
    color: #212121;
    padding: .3rem;
}
.sort-list{
    position: relative;
    background: #fff;
    font-size: .28rem;
    overflow: hidden;
    color: #212121;
}

.sort-item{

    width: 16.6666%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
}

.hot-title{
    font-size: .24rem;
    color: #212121;
    padding: .3rem;
}
.hot-list{
    position: relative;
    background: #fff;
    font-size: .28rem;
    overflow: hidden;
    color: #212121;
}
.hot-list::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 33.33333%;
    left: 33.33333%;
    border-left:.02rem solid #ddd;
    border-right:.02rem solid #ddd;
    
}
.hot-item{
    position: relative;
    width: 33.333%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
}
</style>